<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<span>
				<el-select filterable v-model="queryParams.projectCode" @change="changeProject" class="zs-select-md zs-space-right-sm" placeholder="项目">
					<el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
				</el-select>
				<el-select filterable v-model="queryParams.communityId" class="zs-select-md zs-space-right-sm" placeholder="区域" clearable @change="changeArea">
					<el-option v-for="item in areaList" :key="item.communityId" :label="item.communityName" :value="item.communityId" />
				</el-select>
				<el-select filterable v-model="queryParams.buildId" class="zs-select-md zs-space-right-sm" placeholder="楼宇" clearable @change="changeBuild">
					<el-option v-for="item in buildList" :key="item.buildId" :label="item.buildName" :value="item.buildId" />
				</el-select>
				<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
					<template #reference>
						<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': queryParams.houseId || queryParams.tollItemName || queryParams.shouldTollMonth || queryParams.billNoj || queryParams.startDay || queryParams.endDay || queryParams.billNot }">
							<el-icon>
								<MoreFilled />
							</el-icon>
						</el-button>
					</template>
					<template #default>
						<el-select :teleported="false" filterable v-model="queryParams.houseId" class="zs-select-md zs-space-right-sm" placeholder="房间" clearable>
							<el-option v-for="item in roomList" :key="item.houseId" :label="item.simpleHouseNumber" :value="item.houseId" />
						</el-select>
						<el-select v-model="queryParams.tollItemName" filterable class="zs-select-md zs-space-right-sm" placeholder="收费项目" clearable :teleported="false">
							<el-option v-for="item in toolItemList" :key="item.tollItemName" :label="item.tollItemName" :value="item.tollItemName" />
						</el-select>
						<el-date-picker class="zs-select-md zs-space-right-sm" v-model="queryParams.shouldTollMonth" type="month" placeholder="权责月份" clearable value-format="YYYYMM" :teleported="false" />
						<el-input v-model="queryParams.billNoj" class="zs-select-md zs-space-right-sm zs-space-top-sm" placeholder="收款单号" clearable />
						<el-date-picker class="zs-space-right-sm zs-space-top-sm" v-model="queryParams.startDay" type="day" placeholder="收款开始日期" value-format="YYYYMMDD" :teleported="false" @change="changeDate('start')" />
						<el-date-picker class="zs-space-right-sm zs-space-top-sm" v-model="queryParams.endDay" type="day" placeholder="收款结束日期" value-format="YYYYMMDD" :teleported="false" @change="changeDate('end')" />
						<el-input v-model="queryParams.billNot" class="zs-select-md zs-space-right-sm zs-space-top-sm" placeholder="单据号" clearable />
					</template>
				</el-popover>
				<el-button @click="queryList" class="zs-btn-plain">查询</el-button>
			</span>
			<span>
				<!-- <el-button class="zs-btn-plain" @click="handleDownload">
					<el-icon class="el-icon--left">
						<Upload />
					</el-icon>导出
				</el-button> -->
			</span>
		</div>
		<div class="zs-card zs-table-page-content" :class="{ 'zs-table-first-row-special': queryParams.pageNum == 1 }">
			<hsPageTable :loading="tableData.loading" :total="tableData.total" :tableData="tableData.data" :isHaveIndex="false" :cloumns="tableData.cloumns" @pageChange="pageChange"> </hsPageTable>
		</div>
	</div>
</template>

<script setup lang="jsx">
	// import { downloadNewFile } from '@/utils/publicUtils';
	import { ElMessage } from 'element-plus';
	import { toThousands } from '@/utils/number-util';
	import { getPropertyActualReceiveDetailListApi, getPropertyActualReceiveDropdownApi, getRegionDropdownApi, getBuildDropdownApi, getRoomDropdownApi, getToolItemDropdownApi } from '@/api/SpecialReport/realEstateReceipts';
	import { reactive, ref } from 'vue';
	import { useRoute } from 'vue-router';
	import { useStore } from 'vuex';
	let store = useStore();
	let route = useRoute();
	const curPageSize = ref(store.state.uiPageSizeDefault);

	// 查询条件
	let queryParams = reactive({
		projectCode: route.query.projectCode,
		communityId: '', //区域
		buildId: '', //楼宇
		houseId: '', //房间
		tollItemName: '', //收费项目
		startDay: '', //收款开始日期
		endDay: '', //收款结束日期
		shouldTollMonth: '', //权责月份
		billNoj: '', //收款单号
		billNot: '', //单据号
		pageNum: 1, //页数
		pageSize: curPageSize.value, //页码
	});
	// 表格数据
	let tableData = reactive({
		loading: false,
		data: [],
		total: 0,
		cloumns: [
			{
				prop: 'index',
				label: '序号',
				width: '80',
				type: 'customMethods',
				methods: (a, empty, { $index }) => (queryParams.pageNum == 1 ? ($index == 0 ? '合计' : $index + queryParams.pageSize * (queryParams.pageNum - 1)) : $index + 1 + queryParams.pageSize * (queryParams.pageNum - 1)),
			},
			{ prop: 'preparerDateStr', label: '收款日期', align: 'left', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'preparerDateStr') },
			{ prop: 'communityName', label: '区域', align: 'left', minWidth: '200', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'communityName') },
			{ prop: 'buildName', label: '楼宇', align: 'left', minWidth: '200', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'buildName') },
			{ prop: 'simpleHouseNumber', label: '房间号', minWidth: '200', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'simpleHouseNumber') },
			{ prop: 'customerName', label: '客户', minWidth: '150', align: 'left', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'customerName') },
			{ prop: 'shouldTollDateStr', label: '权责月份', align: 'left', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'shouldTollDateStr') },
			{ prop: 'tollItemName', label: '收费项目', minWidth: '150', align: 'left', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'tollItemName') },
			{
				prop: 'amount',
				label: '实收金额',
				align: 'right',
				width: '130',
				type: 'customMethods',
				methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'amount'),
			},
			{ prop: 'taxRate', label: '税率%', align: 'right', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'taxRate') },
			{
				prop: 'taxAmount',
				label: '税额',
				align: 'right',
				width: '130',
				type: 'customMethods',
				methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'taxAmount'),
			},
			{
				prop: 'actualAmountN',
				label: '实收金额（不含税）',
				align: 'right',
				width: '200',
				type: 'customMethods',
				methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'actualAmountN'),
			},
			{ prop: 'calcStartDate', label: '计费开始日期', width: '200', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'calcStartDate') },
			{ prop: 'calcEndDate', label: '计费结束日期', width: '200', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'calcEndDate') },
			{ prop: 'settleMethod', label: '结算方式', width: '200', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'settleMethod') },
			{ prop: 'billNoj', label: '收款单号', width: '100', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'billNoj') },
			{ prop: 'billNot', label: '单据号', align: 'left', minWidth: '200', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'billNot') },
		],
	});
	function rowMethods(row, index, empty, key) {
		if (row[key]) {
			if (['amount', 'taxAmount', 'actualAmountN'].includes(key)) {
				return row[key] ? toThousands(Number(row[key]).toFixed(2)) : empty;
			} else {
				return row[key] || empty;
			}
		} else {
			if (index == 0) return '';
			return empty;
		}
	}
	//获取项目下拉列表
	let projectList = ref([]);
	function getProjectList() {
		getPropertyActualReceiveDropdownApi().then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				projectList.value = resData.data;
			}
		});
	}
	getProjectList();
	//切换项目重置条件 重新查询数据
	function changeProject() {
		queryParams.communityId = '';
		queryParams.buildId = '';
		queryParams.houseId = '';
		queryParams.tollItemName = '';
		areaList.value = [];
		buildList.value = [];
		roomList.value = [];
		toolItemList.value = [];
		getAreaList();
		getChargeList();
	}

	//切换区域
	const changeArea = () => {
		queryParams.buildId = '';
		queryParams.houseId = '';
		buildList.value = [];
		roomList.value = [];
		getBuildingList();
	};

	//切换楼宇重置房间列表 重新查询数据
	function changeBuild() {
		queryParams.houseId = '';
		roomList.value = [];
		getRoomList();
	}

	// 区域
	let areaList = ref([]);
	function getAreaList() {
		getRegionDropdownApi({ projectCode: queryParams.projectCode }).then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				areaList.value = resData.data;
			}
		});
	}

	// 楼宇
	let buildList = ref([]);
	function getBuildingList() {
		if (!queryParams.communityId) return
		getBuildDropdownApi({ projectCode: queryParams.projectCode, communityid: queryParams.communityId }).then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				buildList.value = resData.data;
			}
		});
	}

	//房间
	let roomList = ref([]);
	function getRoomList() {
		if (!queryParams.buildId) return
		getRoomDropdownApi({ projectCode: queryParams.projectCode, buildId: queryParams.buildId }).then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				roomList.value = resData.data;
			}
		});
	}

	// 收费项目
	let toolItemList = ref([]);
	function getChargeList() {
		getToolItemDropdownApi({ projectCode: queryParams.projectCode }).then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				toolItemList.value = resData.data;
			}
		});
	}

	async function queryList() {
		tableData.loading = true;
		let params = Object.assign({}, queryParams);
		getPropertyActualReceiveDetailListApi(params)
			.then(res => {
				let { errorCode, data, totalCount } = res.data;
				if (errorCode == 200 && data.detailList?.length) {
					if (queryParams.pageNum == 1) {
						let { amount, taxAmount, actualAmountN } = data;
						data.detailList.unshift({ amount, taxAmount, actualAmountN });
					}
					tableData.data = data.detailList;
					tableData.total = totalCount;
				} else {
					tableData.data = [];
					tableData.total = 0;
				}
			})
			.finally(() => {
				tableData.loading = false;
			});
	}

	function changeDate(type) {
		if (queryParams.startDay && queryParams.endDay) {
			if (type == 'start' && queryParams.startDay > queryParams.endDay) {
				ElMessage.warning('开始月份不能大于结束月份');
				queryParams.startDay = '';
			} else if (type == 'end' && queryParams.endDay < queryParams.startDay) {
				ElMessage.warning('结束月份不能小于开始月份');
				queryParams.endDay = '';
			}
		}
	}

	// 分页变化
	function pageChange(page) {
		queryParams.pageNum = page.current;
		queryParams.pageSize = page.pageSize;
		queryList();
	}

	getProjectList();
	getAreaList();
	getChargeList();
	queryList();

	//导出
	// const handleDownload = async () => {
	// let params = Object.assign({}, queryParams);
	// params.brandId = params.brandId || 'all';
	// params.firstFormat = params.firstFormat || 'all';
	// const fileName = `物业应收报表明细.xls`;
	// let fileData = await getContractsExportApi(params);
	// downloadNewFile(fileData.data, fileName);
	// };
</script>
<style lang="scss" scoped>
	:deep(.el-table__row .zs-link) {
		cursor: pointer !important;
	}
</style>
